.sbtn {
  padding: 10px;
  text-align: center;
  -webkit-appearance: none;
  background-color: transparent;
  cursor: pointer;
  border: 1px solid transparent;
  color: #fff;
  overflow: hidden;
  font-size: 1rem;
  border-radius: 4px;
}

.diag-btn {
  text-decoration: none;
  display: inline-block;
  padding: .6rem 1rem;
  background-size: 250%;
  transition: all 0.4s;
  background-color: transparent;
  outline: none;
  border: none;
}

.diag-btn.more-btn {
  background-image: linear-gradient(120deg, transparent 50%, var(--base-hl-color) 50%) !important;
  color: var(--text-color) !important;
}

.diag-btn:hover {
  background-position: 100%;
  color: #fff !important;
  transform: translateX(16px);

  &::after {
    opacity: 1;
  }
}

.diag-btn::after {
  color: #fff;
  transition: all 0.4s;
  font-family: iconfont !important;
  content: "\e719";
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
}
